<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="/WEB-INF/tag/c.tld"%>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>代码生成器</title>
	<%@ include file="../include/style.jsp"%>
	<link href="${webRoot}/assets/jforest/css/jforest-tree.css" rel="stylesheet" media="screen">
	<%@ include file="../include/js.jsp"%>
	<script type="text/javascript" src="${webRoot}/assets/jforest/js/jforest-paging.js"></script>
	<script type="text/javascript" src="${webRoot}/assets/jforest/js/jforest-table.js"></script>
	<script type="text/javascript" src="${webRoot}/assets/jforest/js/jforest-tree.js"></script>
</head>
<body>
<div class="container">
	<ol class="breadcrumb">
	  <li><a href="${webRoot}/">项目列表</a></li>
	  <li><a href="${webRoot}/dbConfig?code=${project.projectCode}">数据库配置</a></li>
	  <li class="active">数据库表选择</li>
	</ol>
	<div class="panel panel-default">
		<div class="panel-body">
			<form class="form-inline" id="formLinkDatabase" style="width:100%;">
			  <div class="form-group col-lg-4">
			    <input type="text" name="ip" class="form-control" placeholder="数据库IP" value="127.0.0.1">
			  </div>
			  <div class="form-group col-lg-1">
			    <input type="text" name="port" class="form-control" value="3306" placeholder="数据库端口">
			  </div>
			  <div class="form-group col-lg-3">
			    <input type="text" name="userName" class="form-control" placeholder="用户名" value="root"/>
			  </div>
			  <div class="form-group col-lg-3">
			    <input type="password" name="userPwd" class="form-control" placeholder="密码" value=""/>
			  </div>
			  <div class="form-group col-lg-1">
			    <button type="button" class="btn btn-info" id="btnLinkDatabase">链接</button>
			  </div>
			</form>
		</div>
	</div>
	<div class="row">
		<div class="col-xs-3">
			<div class="panel panel-default">
				<div class="panel-body" id="databaseTree"></div>
			</div>
		</div>
		<div class="col-xs-9">
			<div class="panel panel-default">
				<div class="panel-heading clearfix">
					<form action="${webRoot}/dbConfig/table/select/save" id="finishForm" method="post" style="width:100%;">
						<input type="hidden" name="code" value="${project.projectCode}"/>
						<input type="hidden" name="key"/>
						<input type="hidden" name="databaseName"/>
						<input type="hidden" name="tableNames"/>
						<div class="pull-right">
					  	<button type="button" id="submitFinishForm" class="btn btn-success btn-sm">完成</button>
					  	</div>
					</form>
				</div>
				<div class="panel-body">
					<table class="table table-border table-hover" id="tableInfo"></table>
				</div>
			</div>
		</div>
	</div>
</div>
	
<div id="tableColumnModal" class="modal fade">
  <div class="modal-dialog" style="width:80%;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title"></h4>
      </div><!-- /.modal-header -->
      <div class="modal-body">
       	<table class="table table-border table-hover"></table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
	
<script type="text/javascript">
$(function(){
	$('#databaseTree').jfTree({
		root:{
			id:0,
			name:'数据库集'
		},
		nodeClick:function(node){
			if(node.options.pid){
				$('#finishForm input[name="key"]').val(node.options.pid);
				$('#finishForm input[name="databaseName"]').val(node.options.name);
				$('#tableInfo').jfTable('loadData',{
					key:node.options.pid,
					tableSchema:node.options.name
				});
			}
		}
	});
	
	$('#btnLinkDatabase').click(function(){
		$form = $('#formLinkDatabase');
		var data = {
			ip:$form.find('[name="ip"]').val(),
			port:$form.find('[name="port"]').val(),
			userName:$form.find('[name="userName"]').val(),
			userPwd:$form.find('[name="userPwd"]').val()
		};
		
		$.post('${webRoot}/dbConfig/linkDatabase',data,function(result){
			if(result){
				var node = $('#databaseTree').jfTree('addNode',result.item);
				$('#databaseTree').jfTree('addChildNode',node,result.tables);
			}
		});
	});
	
	$('#submitFinishForm').click(function(){
		$('#finishForm').submit();
	});
	
	$('#tableInfo').jfTable({
		autoLoad:false,
		pagingEl:null,
		ajax:{
			url:'${webRoot}/dbConfig/searchTables'
		},
		cols:[{
			code:'tableName',
			checkbox:true,
			click:function(){
				var data = this.getCheckboxValues()
				$('#finishForm input[name="tableNames"]').val(data);
			}
		},{
			code:'tableScheam',
			title:'数据库名'
		},{
			code:'tableName',
			title:'表名'
		},{
			code:'createDatetime',
			title:'创建时间'
		},{
			code:'commend',
			title:'说明'
		},{
			name:'操作',
			icons:[{
				tooltip:'查看表',
				icon:'fa-search',
				click:function(record){
					$('#tableColumnModal table').jfTable('loadData',{
						key:$('#finishForm input[name="key"]').val(),
						tableSchema:record.tableScheam,
						tableName:record.tableName
					});
					$('#tableColumnModal .modal-title').html(record.tableName + '表');
					$('#tableColumnModal').modal('show');
				}
			}]
		}]
	});
	
	$('#tableColumnModal table').jfTable({
		autoLoad:false,
		ajax:{
			url:'${webRoot}/dbConfig/searchColumns',
		},
		cols:[{
			code:'columnName',
			title:'列名称'
		},{
			code:'dataType',
			title:'数据类型'
		},{
			code:'charMaxLength',
			title:'最大长度'
		},{
			code:'isKey',
			title:'是否主键'
		},{
			code:'isNullable',
			title:'是否可为空'
		},{
			code:'commend',
			title:'说明'
		}]
	})
})
</script>
</body>
</html>